<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
<style type="text/css">
 *{margin: 0;padding: 0;list-style: none;}
 html,body{height: 100%;width: 100%;
 	overflow: hidden;}
 
 #box{width: 1000px;height: 550px;
 	border: 1px solid #DDDDDD;
 	margin: 50px auto;position: relative;
  background:rgba(205,205,222,0.3);}
  h1{text-align: center;margin: 20px 0 20px 0;}
  #top{
  	height: 50px; width: 100%; text-align: center;
  	}
   #top_but{width:100%;text-align: center;margin-bottom:50px;}
   #top_but #but{width: 50px;height: 25px;border: 1px solid #48beef;}
   #tip{position: absolute;right: 0; padding: 3px; 
      border: 1px solid red; display: none;}
  #under{
  	width: 100%;
  	background:rgba(189,222,111,0.3);}
  #tab{width: 80%;margin: auto;}
  #tab tr th{width: 25%;}
</style>
</head>
<body>
  <div id="box" >
  <h1>添加个人信息</h1>
    <div id="top">
      姓名：<input id="ww" type="text"> 
      邮箱：<input id="mail" type="text"> 
      年龄：<input id="age" type="text">
    </div>
    <div id="top_but"><input id="but" type="button" value="添加"> <p id="tip">输入相应的值，不能为空</p></div>
    <div id="under">
    <table id="tab">
  <tr>
    <th>姓名</th>
    <th>Email</th>
    <th>年龄</th>
    <th>操作</th>
  </tr>
</table>
  
    </div>
  </div>
<script type="text/javascript">
var ww=document.getElementById('ww'),
    mail=document.getElementById('mail'),
    age=document.getElementById('age'),
    tab=document.getElementById('tab'),
    but=document.getElementById('but'),
    tip=document.getElementById('tip');
console.log(ww)
console.log(mail)
console.log(age)


but.onclick=function(){
  var nameval=ww.value,
      mailval=mail.value,
      ageval=age.value;


  if (mailval&&ageval) {
   var otr=document.createElement("tr");
   var oth1=document.createElement("th");
   oth1.innerHTML=nameval;
   var oth2=document.createElement("th");
   oth2.innerHTML=mailval;
   var oth3=document.createElement("th");
   oth3.innerHTML=ageval;
   var oth4=document.createElement("th");
   var del=document.createElement("input");
   del.type="button";
   del.value="删除";
    
   oth4.appendChild(del);
   otr.appendChild(oth1);
   otr.appendChild(oth2);
   otr.appendChild(oth3);
   otr.appendChild(oth4);
del.onclick=function(){
    tab.removeChild(otr);
  }
     
    tab.appendChild(otr);
    ww.value="";
    mail.value="";
    age.value="";




  }
  else{tip.style.display="block";}
}
name.onfocus=function(){tip.style.display="none";}
mail.onfocus=function(){tip.style.display="none";}
age.onfocus=function(){tip.style.display="none";}


</script>
</body>
</html>